<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                body{
                    margin: 0;
                    padding: 0;
                }
                
                .web{
                    width: 1000px;
                    height: 1500px;
                    background-color: #CCCCCC;
                    border: #666666 1px solid;
                    margin: 0 auto;
                    
                }
                /*对联广告样式*/
                #ad1,#ad2{
                    position: fixed;
                    top:50px;
                    width:200px;
                    height: 300px;
                    background-image: url(ad1.png);
                }
                #ad1{left: 0;}/*靠左*/
                #ad2{right:0 ;}/*靠右*/
                /*弹窗广告样式*/
                #ad3{
                    position: fixed;
                    bottom:0px;/*右下*/
                    right:0px;
                    height:250px ;
                    width:300px ;
                    background-image: url(ad2.png);
                }
                /*关闭按钮图片样式*/
                #close,#close1{
                    
                    width: 50px;
                    height:15px ;
                    object-fit: cover;
                    position: absolute;
                    bottom:0;
                    right:0;
                    background-image: url(close.webp);
                    background-repeat:no-repeat;
                    background-size:cover;
                    background-position:center center;
                }
                
                #close3{
                    
                    width: 50px;
                    height:15px ;
                    object-fit: cover;
                    position: absolute;
                    top:0;
                    right:0;
                    background-image: url(close.webp);
                    background-repeat:no-repeat;
                    background-size:cover;
                    background-position:center center;
                }
            </style>
    </head>

	<body>
		<div id="ad1">
			<div id="close"></div>
		</div>
		<div class="web"></div>
		<div id="ad2">
			<div id="close1"></div>
		</div>
		<div id="ad3" style="display:none;">
			<div id="close3"></div>
		</div>
	</body>
	<script type="text/javascript">
		var close = document.querySelector('#close');
		var close1 = document.querySelector('#close1');
		var close3 = document.querySelector('#close3');
		var ad1 = document.getElementById('ad1');
		var ad2 = document.getElementById('ad2');

		/* 关闭左边 */
		close.onclick = function() {
			ad1.style.display = 'none';
			ad2.style.display = 'none';
		}

		/* 关闭右边 */
		close1.onclick = function() {
			ad1.style.display = 'none';
			ad2.style.display = 'none';
		}
		

		/* 关闭弹窗广告 */
		close3.onclick = function() {
			var ad3 = document.getElementById('ad3');
			ad3.style.display = 'none';
		}

		/* 1.5秒弹出弹窗广告 */
		window.onload = function() {
			var ad3 = document.getElementById('ad3');
			setTimeout(function() {
				ad3.style.display = 'block';
			}, 1500);
		}
	</script>
</html>
